import { Message } from '@/components/library/Message'
import schema from '@/utils/vee-validate-schema'
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
export const useLazyData = (apiFn) => {
  const target = ref(null)
  const list = ref([])
  // 用于检测元素可见性的函数
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      if (isIntersecting) {
        apiFn().then(({ result }) => {
          //   console.log(result)
          list.value = result
        })
        // 发了一次请求后，停止检查
        stop()
      }
    }
  )

  return {
    target,
    list
  }
}
/**
 * 发送验证码封装
 * @param {Object} form     表单对象
 * @param {Function} ApiFn  验证码API函数
 * @returns {Objct} { time, sendCodeBtn }
 */
export const useMsgCode = (form, ApiFn) => {
  // 定时器倒计时业务
  const time = ref(0)
  const { resume, pause } = useIntervalFn(() => {
    time.value--
    if (time.value <= 0) {
      pause()
    }
  }, 1000, { immediate: false })

  // 点击发送验证码
  const sendCodeBtn = async () => {
    // 需要校验手机号
    const res = schema.mobile(form.mobile)
    // 💥手机号校验不通过，提示用户
    if (res !== true) return Message({ type: 'warn', message: res })
    // 倒计时没结束则退出，不做任何处理
    if (time.value !== 0) return
    try {
      // 💥 发送请求 - 这里是获取QQ完善信息的时候短信验证码的接口
      await ApiFn(form.mobile)
      // 请求发送成功提示
      Message({ type: 'success', message: '发送验证码成功' })
      // 秒数初始化
      time.value = 60 * 2
      // 倒计时开始
      resume()
    } catch (error) {
      console.dir(error)
      // 💥请求异常(验证码已发送/用户名不存在)，提示用户
      Message({ type: 'warn', message: error.response.data.message })
    }
  }

  return { time, sendCodeBtn }
}

/**
 * QQ授权登录封装
 * @param {Object} form     表单对象
 * @param {Function} ApiFn  QQ登录函数
 * @returns  {Objct} { submit, formCom }
 */
export const useQQLogin = (form, ApiFn) => {
  const store = useStore()
  const router = useRouter()
  const formCom = ref(null)
  // 提交注册
  const submit = async () => {
    // console.log(formCom.value)
    const valid = await formCom.value.validate()
    // 要校验通过，才发送请求
    if (valid) {
      // console.log('校验通过')
      try {
        // 发送请求
        const { result } = await ApiFn(form)
        console.log(result)
        // 注册成功提示
        Message({ type: 'success', message: 'QQ登录成功' })
        // 存储用户信息
        store.commit('user/setUser', result)
        // 跳转页面
        router.push('/')
      } catch (error) {
        // 错误捕获和提示
        Message({ type: 'error', message: error.response.data.message })
      }
    }
  }
  return { submit, formCom }
}
